<template lang="html">
    <div class="xtx-pagination" v-if="myTotal > 0">
        <a href="javascript:;" v-if="currPage <= 1" class="disabled">上一页</a>
        <a href="javascript:;" v-else @click="changePage(currPage - 1)">上一页</a>
        <span v-if="pager.start > 1">...</span>
        <a href="javascript:;" :class="{active:i === currPage}" v-for="i in pager.buttonArr" :key="i">{{ i }}</a>
        <span v-if="pager.end < pager.pageCount">...</span>
        <a href="javascript:;" v-if="currPage >= pager.pageCount" class="active">下一页</a>
        <a href="javascript:;" v-else class="active">下一页</a>
    </div>
</template>
<script>
import { ref, computed, watch } from 'vue';
export default {
    name:'XtxPagination',
    props:{
        total:{
            type:Number,
            default:100
        },
        myCurrPage:{
            type:Number,
            default:1
        },
        pageSize:{
            type:Number,
            default:10
        }
    },
    emits:['current-change'],
    setup(props, {emit}) {
        // 总条数
        const myTotal = ref(100)
        // 每页条数
        const myPageSize = ref(10)
        // 当前页
        const currPage = ref(5)
        // 按钮数
        const buttonCount = 5

        const pager = computed(()=>{
            // 总页数
            const pageCount = Math.ceil(myTotal.value/myPageSize.value)

            let start = currPage.value - Math.ceil(buttonCount/2)

            let end = start + buttonCount - 1

            if(start < 1) {
                start = 1
                end = (start + buttonCount - 1) > pageCount ? pageCount : (start + buttonCount - 1)
            }

            // 页码大于总页数，重算
            if(end > pageCount) {
                end = pageCount
                start = (end - buttonCount + 1) < 1 ? 1 : (end - buttonCount + 1)
            }

            const buttonArr = []
            for(let i = start; i <= end; i++) {
                buttonArr.push(i)
            }

            return {pageCount, start, end, buttonArr}
        })

        // 改变页码
        const changePage = (newPage) => {
            if(currPage.value != newPage) {
                currPage.value = newPage
                emit('current-change', newPage)
            }
        }

        watch(props, ()=>{
            myTotal.value = props.total
            myPageSize.value = props.pageSize
            currPage.value = props.myCurrPage
        }, {immediate: true})

        return {pager, currPage, changePage}
    }
}
</script>
<style lang="less" scoped>
.xtx-pagination {
    display: flex;
    justify-content: center;
    padding: 30px;
    > a {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #e4e4e4;
        border-radius: 4px;
        margin-right: 10px;
        &:hover {
            color: @xtxColor;
        }
        &.active {
            background: @xtxColor;
            color: #fff;
            border-color: @xtxColor;
        }
        &.disabled {
            cursor: not-allowed;
            opacity: 0.4;
            &:hover {
                color: #333
            }
        }
    }
    > span {
        margin-right: 10px;
    }
}
</style>